<!--
 * @Author: sdy
 * @Date: 2023-04-23 17:52:47
 * @LastEditors: lisong
 * @LastEditTime: 2023-04-24 14:33:27
 * @Description: 布局查询的Bar
-->
<template>
  <div :class="ns.b()">
    <div :class="ns.b('content')">
      <slot name="content"></slot>
    </div>
    <div :class="ns.b('btn-group')">
      <slot name="buttons"></slot>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import {useNamespace} from "element-plus";
let ns = useNamespace("condition-bar", ref('rk'));

</script>

<style scoped lang="scss">

@import "../../styles/public/pub-bem";

@include b('condition-bar') {
  width: 100%;
  background-color: #edf1fc;
  padding: 10px;
  display: flex;
  justify-items: flex-start;
  &-content {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 10px 0 0;
  }
  &-btn-group {
    min-width: 15%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
  }
}

</style>
<style lang="scss">
@import "../../styles/public/pub-bem";
@include b('condition-bar') {
  .el-form-item {
    margin-right: 15px;
    margin-bottom: 0;
  }
}
</style>
